<template>
  <div class="home-singer">
    <h3>热门歌手</h3>
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li
          v-for="(item, index) in listData"
          :key="index"
          @click="selectItem(item)"
        >
          <div class="cover">
            <van-image :src="item.singer_pic" radius="1rem" alt="" />
          </div>
          <span> {{ item.singer_name }} </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { betterScrollHorizontal } from "../../common/betterScroll.js"; //引入betterscroll
export default {
  data() {
    return {
      listData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$request("get", "/singer/list").then((res) => {
        console.log(res);
        this.listData = res.data.list;
        // 调用横向滚动的方法
        betterScrollHorizontal(
          this,
          this.$refs.wrapper,
          this.$refs.content,
          this.listData.length,
          10
        ); //调用横线滚动的方法
      });
    },
    selectItem(item) {
      const singer_mid = item.singer_mid;
      //1.调用状态管理，commit提交唤醒mutations
      //this.$store.commit("saveSinger", item);
      //2.调用状态管理，通过分发action方法
      this.$store.dispatch('saveSinger',item);
      this.$router.push({ path: `/singer/${singer_mid}` });
    },
  },
};
</script>
<style scoped>
.wrapper {
  width: 100%;
  /*容器的宽度是屏幕的宽度*/
  overflow: hidden;
}

ul.content li {
  /*li默认是块级元素，修改为内行元素，但是要具备块级元素的特性 */
  display: inline-block;
  width: 10rem;
  vertical-align: top;
  /*垂直方向的位置*/
}

/*li里面有两个元素：div和span，所以使用通配符 */
ul.content li * {
  margin: 0.1rem;
  /*里面的元素与li的边缘有个间距 */
}

ul.content li > span {
  font-size: 0.8rem;
  color: #54493b;
}
</style>